<template>
	<view>
		<view style="height: 18upx;"></view>
		<view v-if="goods.distributionFlag == 30" class="tabBar-view">
			<view class="tabBar-item" :class="{'tabBar-active': formData.type == '10'}" @click="formData.type = '10'">
				快递到家
			</view>
			<view class="tabBar-item" :class="{'tabBar-active': formData.type == '20'}" @click="formData.type = '20'">
				公司自提
			</view>
		</view>
		<view v-if="goods.distributionFlag == '10'" class="tabBar-view">
			<view class="tabBar-item tabBar-active">快递到家</view>
		</view>
		<view v-if="goods.distributionFlag == '20'" class="tabBar-view">
			<view class="tabBar-item tabBar-active">公司自提</view>
		</view>
		<view class="card-address">
			<view class="card-content" @click="onNavAddress">
				<view v-if="formData.type == '10' && address.addressId" class="address-view">
					<view class="address-text">{{address.name}} · {{address.phone}}</view>
					<view class="address-desc">
						{{address.provinceName}}{{address.cityName}}{{address.areaName}}{{address.address}}
					</view>
				</view>
				<view v-else-if="formData.type == '20' && orgAddress.orgId" class="address-view">
					<view class="address-text">{{orgAddress.orgName}}</view>
					<view class="address-desc">{{orgAddress.remark}}</view>
				</view>
				<view v-else class="address-view">
					<view class="address-desc">请选择地址</view>
				</view>
				<uni-icons type="right" color="#BBAFA7"></uni-icons>
			</view>
			<image src="/static/address-line@2x.png" mode="widthFix" class="address-line"></image>
		</view>

		<view class="card-goods">
			<view class="card-content">
				<image :src="goods.coverImg" class="goods-image" mode="aspectFill"></image>
				<view class="goods-content">
					<view class="goods-name">{{goods.name}}</view>
					<view class="tag-view">
						<view class="tag-item">{{skuItem.skuName}}</view>
					</view>
					<view class="goods-sum">
						<view class="number-view">
							<view>{{skuItem.redeemPoints}}</view>
							<view class="unit-text">积分</view>
						</view>
						<view class="sum-number">
							<view>x</view>
							<view class="number-text">{{formData.quantity}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cell-view">
				<view class="label-view">积分余额</view>
				<view class="value-view" style="color: #2C1101;">{{userAssets.points}}</view>
			</view>
			<view class="cell-view">
				<view class="label-view">兑换所需</view>
				<view class="value-view">-{{getMoney()}}</view>
			</view>
			<view class="cell-view" style="flex-direction: column;align-items: flex-start;">
				<view class="label-view">备注信息</view>
				<textarea v-model="formData.remark" class="desc-view" placeholder-class="plac-css" placeholder="请输入"
					maxlength="255" />
			</view>
		</view>

		<FloatView>
			<view class="button-view">
				<view class="options-view">
					<view class="options-desc">实付</view>
					<view class="price-view">
						<view class="price-text">{{getMoney()}}</view>
						<view class="price-unit">积分</view>
					</view>
				</view>
				<view class="button-item" @click="onSubmit">提交</view>
			</view>
		</FloatView>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabBarActive: 1,
				orgAddress: {
					orgName: '',
					orgId: '',
					remark: ''
				},
				address: {
					addressId: '',
					name: '',
					phone: '',
					address: '',
					provinceName: '',
					cityName: '',
					areaName: '',
				},
				userAssets: {
					points: '', // 积分余额（总=项目积分+常规积分）
				},
				goods: {
					distributionFlag: '30', // 配送类型 10支持快递 20到店自提 30 都支持
					coverImg: '',
					name: '',
				},
				skuItem: {
					skuId: "", // 规格ID
					spuId: "", // 商品ID
					skuName: "", // 规格名称
					redeemPoints: 0, // 兑换所需积分
					marketPrice: 0, // 市场价值
					stock: 0, // 库存
					exchangeNum: 0, // 已兑换数量
					limited: 0, // 限购数量
				},
				formData: {
					spuId: '', // 商品id
					skuId: '', // 规格id
					quantity: '', // 兑换数量
					usePoints: '', // 兑换所需积分（计算后的）
					type: '10', // 兑换类型 10快递 20自提
					addresId: '', // 快递：收货人地址ID
					sysOrganizationId: '', // 自提：公司ID
					remark: '', // 备注
				}
			};
		},
		onLoad(options) {
			this.formData.spuId = options.spuId
			this.formData.skuId = options.skuId
			this.formData.quantity = options.quantity - 0 || 0
			this.getGoodsDetail()
			this.getUserAssets()
		},
		methods: {
			async onSubmit() {
				const formData = this.formData
				const showToast = uni.$util.showToast
				if (formData.type == '10' && !this.address.addressId) return showToast('请选择收货地址')
				if (formData.type == '20' && !this.orgAddress.orgId) return showToast('请选择公司自提地址')
				formData.addresId = this.address.addressId || ''
				formData.sysOrganizationId = this.orgAddress.orgId || ''
				formData.usePoints = this.getMoney()
				uni.$util.showLoading()
				await uni.$api.exchangeOrder(this.formData).finally(uni.finally)
				await uni.$util.showSuccess()
				uni.navigateBack()
			},
			async getUserAssets() {
				const res = await uni.$api.getUserAssets()
				this.userAssets = res.data
			},
			async getGoodsDetail() {
				uni.$util.showLoading()
				const res = await uni.$api.getGoodsDetail(this.formData.spuId).finally(uni.finally)
				const skuList = res.data.skuList || []
				if (skuList && skuList.length) {
					const index = skuList.findIndex(item => item.skuId == this.formData.skuId)
					if (index == -1) return
					this.skuItem = skuList[index]
				}
				res.data.coverImg = this.getImage(res.data.coverImg)
				this.formData.type = res.data.distributionFlag == '30' ? '10' : res.data.distributionFlag
				this.goods = res.data
			},
			onNavAddress() {
				uni.navigateTo({
					url: `/pagesMine/addressList/addressList?status=1&type=${this.formData.type}`,
					events: {
						backEvent: (res) => {
							if (this.formData.type == '10') this.address = res
							if (this.formData.type == '20') this.orgAddress = res
						}
					}
				})
			},
			getMoney() {
				if (!this.skuItem.redeemPoints || !this.formData.quantity) return
				const money = this.skuItem.redeemPoints * this.formData.quantity
				if (`${money}`.indexOf('.') != -1) return money.toFixed(2)
				return money
			},
			getImage(coverImg) {
				const strArr = coverImg.split(',')
				if (!strArr.length) return ''
				return `${this.IMG_URL}${strArr.shift()}`
			},
		}
	}
</script>

<style scoped lang="scss">
	.tabBar-view {
		width: 705rpx;
		margin: 0 auto;
		border-radius: 14rpx 14rpx 0 0;
		background: white;
		@extend .row-between;
		border-bottom: 1px solid #F7E8E4;

		.tabBar-item {
			width: calc(100% / 2);
			height: 112upx;
			@extend .column;
			font-size: 29rpx;
			font-weight: 400;
			color: #2C1101;
			position: relative;
			transition: all 0.3s;

			&:before {
				content: "";
				width: 127rpx;
				height: 2px;
				position: absolute;
				bottom: 0;
				transition: all 0.3s;
			}
		}

		.tabBar-active {
			color: #FF2615;

			&:before {
				background: #FF2615;
			}
		}
	}

	.card-address {
		width: 705rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 0 0 14rpx 14rpx;
		padding: 45upx 36upx;
		position: relative;
		overflow: hidden;

		.card-content {
			width: 100%;
			@extend .row-between;

			.address-view {
				width: calc(100% - 50upx);

				.address-text {
					width: 100%;
					font-size: 33rpx;
					font-weight: 600;
					color: #2C1101;
				}

				.address-desc {
					width: 100%;
					@extend .text-dot;
					font-size: 25rpx;
					font-weight: 400;
					color: #B8ACA3;
					margin-top: 11upx;
				}
			}
		}

		.address-line {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 115%;
		}
	}

	.card-goods {
		width: 705rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 22upx;
		margin-top: 18upx;

		.card-content {
			width: 100%;
			@extend .row-between;
			align-items: flex-start;
			margin-bottom: 22upx;

			.goods-image {
				width: 194upx;
				height: 194upx;
			}

			.goods-content {
				width: calc(100% - 212upx);

				.goods-name {
					width: 100%;
					font-size: 29rpx;
					font-weight: 400;
					color: #2C1101;
				}

				.tag-view {
					width: 100%;
					@extend .row-start;
					margin-top: 7upx;

					.tag-item {
						padding: 5upx 13upx;
						font-size: 18rpx;
						font-weight: 400;
						color: #FE5950;
						border: 1rpx solid #FE5950;
						border-radius: 12upx;
					}

				}

				.goods-sum {
					width: 100%;
					@extend .row-between;
					margin-top: 25upx;

					.number-view {
						@extend .row;
						align-items: baseline;
						font-size: 36rpx;
						font-weight: 600;
						color: #EC4725;


						.unit-text {
							font-size: 22rpx;
						}
					}

					.sum-number {
						@extend .row;
						align-items: baseline;
						font-size: 22rpx;
						font-weight: 400;
						color: #B7A09A;

						.number-text {
							font-size: 25rpx;
							color: #4D0F0B;
							margin-left: 7upx;
						}
					}
				}
			}
		}

		.cell-view {
			width: 100%;
			padding: 22upx 0;
			border-top: 1px solid #F7E8E4;
			@extend .row-between;

			.label-view {
				font-size: 25rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #69442E;
			}

			.value-view {
				font-size: 29rpx;
				font-weight: 600;
				color: #EC4725;
			}

			.desc-view {
				width: 100%;
				height: 170upx;
				padding: 29upx;
				background: #FAF6F3;
				border-radius: 14rpx;
				margin-top: 18upx;
				font-size: 25rpx;
				font-weight: 400;

				.plac-css {
					font-size: 25rpx;
					font-weight: 400;
					color: #B8ACA3;
				}
			}
		}
	}

	.button-view {
		width: 100%;
		padding: 0 22upx;
		@extend .row-between;

		.options-view {
			@extend .row;
			align-items: baseline;

			.options-desc {
				font-size: 24rpx;
				font-weight: 500;
				color: #2C1101;
			}

			.price-view {
				margin-left: 14upx;
				@extend .row;
				align-items: baseline;

				.price-text {
					font-size: 43rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #EC4725;
				}

				.price-unit {
					font-size: 22rpx;
					margin-left: 10upx;
					color: #EC4725;
				}
			}
		}

		.button-item {
			width: 324rpx;
			height: 91rpx;
			@extend .column;
			background: linear-gradient(180deg, #FF7065 0%, #FF2615 100%);
			border-radius: 45rpx;
			font-size: 29rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>